<template>
  <view class="evaluation-management">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-background"></view>
      <view class="nav-content">
      </view>
    </view>

    <!-- 评价列表 -->
    <view class="evaluation-container">
      <view class="evaluation-list">
        <view class="evaluation-item" v-for="(item, index) in evaluations" :key="index">
          <view class="item-header">
            <view class="user-name">{{ item.userName }}</view>
            <view class="detail-btn" @click="viewDetail(item)">
              <text class="btn-text">查看详情</text>
            </view>
          </view>
          <view class="divider"></view>
          <view class="item-content">
            <view class="order-number">订单编号:{{ item.orderId }}</view>
            <view class="rating-info">
              <text class="rating-text">综合评分:{{ item.rating }}分</text>
              <view class="stars">
                <text 
                  v-for="star in 5" 
                  :key="star" 
                  class="star"
                  :class="{ 'star-filled': star <= item.rating }"
                >
                  ★
                </text>
              </view>
            </view>
            <view class="evaluation-time">评价时间:{{ item.time }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      evaluations: [
        {
          userName: '张女士',
          orderId: '2021010831213',
          rating: 3,
          time: '2023-03-12 11:02'
        },
        {
          userName: '张女士',
          orderId: '2021010831213',
          rating: 3,
          time: '2023-03-12 11:02'
        },
        {
          userName: '李先生',
          orderId: '2021010831214',
          rating: 5,
          time: '2023-03-11 15:30'
        },
        {
          userName: '王女士',
          orderId: '2021010831215',
          rating: 4,
          time: '2023-03-10 09:15'
        }
      ]
    };
  },
  methods: {
    viewDetail(item) {
      // 跳转到订单详情页面
      console.log('查看详情:', item);
      uni.navigateTo({
        url: `/pages/performanc-management/details/details?orderId=${item.orderId}&userName=${item.userName}&rating=${item.rating}&time=${item.time}`
      });
    },
  }
};
</script>

<style scoped>
.evaluation-management {
  min-height: 100vh;
  background: #f5f5f5;
  position: relative;
}

/* 导航栏样式 */
.nav-bar {
  position: relative;
  z-index: 1;
  height: 70px;
  padding-top: 30px;
  overflow: hidden;
}

.nav-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #1F73F1;
}

.nav-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
}

/* 评价容器样式 */
.evaluation-container {
  position: relative;
  z-index: 10;
  margin-top: -70px;
  padding: 0 20px 20px;
}

/* 评价列表样式 */
.evaluation-list {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.evaluation-item {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.user-name {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.divider {
  height: 1px;
  background: #e0e0e0;
  margin-bottom: 12px;
}

.item-content {
  display: flex;
  flex-direction: column;
}

.order-number {
  font-size: 14px;
  color: #3388FF;
  margin-bottom: 8px;
}

.rating-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.rating-text {
  font-size: 14px;
  color: #333;
  margin-right: 8px;
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  font-size: 16px;
  color: #E0E0E0;
}

.star-filled {
  color: #FFD700;
}

.evaluation-time {
  font-size: 14px;
  color: #333;
}

.detail-btn {
  background: #1F73F1;
  color: #fff;
  padding: 6px 12px;
  border-radius: 16px;
  border: none;
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-text {
  color: #fff;
  font-size: 12px;
  font-weight: 500;
}
</style>